<template>
  <div v-if="noPortAccountText" class="lock-box text-white text-center d-flex">
    <div style="margin: auto">
      <div>{{ noPortAccountText }}</div>
      <el-button type="primary" size="mini" style="margin-top: 20px" @click="handleGoBind">去绑定账号</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  components: {},
  props: {
    noPortAccount: Number | String
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {
    noPortAccountText({noPortAccount}) {
      const map = {
        '0': '端口配置需要绑定账号后，才可激活页面哦',
        '2': '系统检测到您在58安居客的帐号需要短信验证，验证完即可使用',
        '3': '系统检测到您在58安居客的账号密码发生了修改，请修改最新的密码重新绑定后进行使用',
      };
      return noPortAccount != 1 ? (map[noPortAccount] || map[0]) : ''
    }
  },
  methods: {
    handleGoBind() {
      this.$router.push({ name: 'portManagement' });
    },
  },
};
</script>
<style scoped>
.lock-box {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 5px;
}
</style>
